<template>
  <view class="card">
    <navigator :url="'/subpkg/book/book?book_id=' + data._id" class="img">
      <!-- <image class="imgUrl" :src="" ></image> -->
      <pImage class="imgUrl"
                             trans-opacity
                             :transition-duration="1"
                             :src="data.cover ? data.cover : defalut"
                             placeholder="../../static/default.png"
                             err='../../static/err.jpg'
                             :height="100"
                             :width="100"
                             radius='7px'
              />
      <view class="blog-js">
        <p class="name">{{data.name ? data.name : txt}}</p>
        <p class="time">{{data.date ? data.date : ''}}</p>
        <view class="tags">
          <view v-for="(im,ix) in data.tags" :key="ix">
            <image style="width: 20px;height: 20px; margin: 0 3px;vertical-align:text-bottom;" src="../../static/icons/tag.png"></image>
            <text>{{im}}</text>
          </view>
        </view>
      </view>
    </navigator>
  </view>
</template>

<script>
  import pImage from '@/components/p-image/index.vue'
  export default {
    name:"blog",
    components: {
        pImage
      },
    data() {
      return {
        txt:'正在加载中...',
        defalut:'https://ts1.cn.mm.bing.net/th/id/R-C.2e918266d3c1bae47cb19ddc8ac4edc0?rik=nfjBgWtpXxpqdg&riu=http%3a%2f%2fnews.mydrivers.com%2fImg%2f20120217%2f2012021709492293.jpg&ehk=zNgULAYbKtimIkSsp6CxY6lCzmpBUkkP8cVSdU3N8z0%3d&risl=1&pid=ImgRaw&r=0'
      };
    },
    props:{
      data:{
        type:Object
      }
    }
  }
</script>

<style lang="scss">
.card {
  position: relative;
  width: 680rpx;
  height: 350rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #555;
  border-radius: 12px;
  overflow: hidden;
  padding: 5px 5px;
  box-shadow: 0 0 3px 5px #ccc;
  border: 1px solid #fff;
  &::before{
    content: '';
    position: absolute;
    width: 750px;
    height: 750px;
    animation: rotation_9018 3s linear infinite ;
    background-image: conic-gradient( #cd93ff,transparent, #70e2ff,transparent, #9fff5b,transparent, #ffe83f,transparent);
   
  }
  .img,.imgUrl {
    border-radius: 15px;
    width: 100%;
    height: 100%;
  }
  .img{
    position: relative;
    z-index: 1;
    color: #fff;
    .blog-js{
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
      display: flex;
      flex-direction: column;
      color: #fff;
      width: 80%;
      height: 80%;
      justify-content: space-evenly;
      .name{
        font-size: 20px;
        font-weight: bold;
      }
      .time{
        font-size: 16px;
      }
      .tags{
        display: flex;
        flex-wrap: wrap;
        margin: 5px;
        font-size: 14px;
      }
    }
    
   
  }
}



// .card::before {
//   content: ' ';
//   position: absolute;
//   display: block;
//   width: 680rpx;
//   height: 680rpx;
  // background: linear-gradient(90deg, transparent, #ff2288, #387EF0, transparent);
  // transition: opacity 300ms;
  // animation: rotation_9018 3000ms infinite linear;
  // animation-play-state: running;
// }



@keyframes rotation_9018 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>